<template>
  <div>
    <!-- 添加商品按钮 -->
    <div class="center">
      <el-button type='primary' @click="addProductBtn">添加商品</el-button>
    </div>
    <!-- 列表展示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="商品id" width='100'></el-table-column>
      <el-table-column prop="title" label="商品名称"  show-overflow-tooltip width='150'></el-table-column>
      <el-table-column prop="image" label="商品图片"  show-overflow-tooltip width='200'></el-table-column>
      <el-table-column prop="sellPoint" label="商品卖点" show-overflow-tooltip width='150'></el-table-column>
      <el-table-column prop="price" label="商品价格"  width='100' show-overflow-tooltip></el-table-column>
      <el-table-column prop="num" label="商品数量" width='100'></el-table-column>
      <el-table-column prop="descs" label="商品描述" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="bianji(scope.row)" size="small">编辑</el-button>
          <el-button size="small" type="danger"  @click="shanchu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="center">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page='currentPage'
        @current-change='changePage'
        :total="20">
      </el-pagination>
    </div>

    <!-- 对话框 -->
    <el-dialog
      title='添加产品'
      :visible.sync='outerVisible'
      width='80%'
    >
      <el-dialog
        title='商品类目'
        :visible.sync='innerVisible'
        append-to-body
        width='70%'
      >
        <ProductTree @getleimu = 'getName' />
        <!-- 点击确定按钮时请求当前类目的规格参数 -->
        <el-button type='primary' @click='getGuiGe(cid)'>确定</el-button>
      </el-dialog>

      <!-- form表单 -->
      <AddProduct
        :guige='guige'
        :preGuige='preGuige'
        :preData='preData'
        :cid='cid'
        :leimu='leimu'
        :innerVisible='innerVisible'
        :outerVisible='outerVisible'
        @changeInner='changeInner'
        @changeOuter='changeOuter'
        @getdata='getdata'
        @clearCid='clearCid'
       />
    </el-dialog>

    
  </div>
</template>

<script>
import AddProduct from './AddProduct'
import ProductTree from './ProductTree'
export default {
  name: "Home",
  components:{
    AddProduct,
    ProductTree
  },
  data(){
    return {
      tableData:[],
      currentPage:1,
      outerVisible:false,
      innerVisible:false,
      leimu:'',
      cid:'',
      preData:{},
      guige:{},
      preGuige:{}
    }
  },
  mounted(){
    this.getdata(this.currentPage)
  },

  methods:{
    // 获取规格参数
    getGuiGe(cid){
      this.innerVisible = false;
      this.$api.getSelectItemParamById({id:cid})
      .then(data=>{
        console.log(data)
        this.guige = data[0]
      })
    },
    // 点击添加商品按钮
    addProductBtn(){
      this.outerVisible = true;
      // 初始化
      this.preData = {};
      this.guige = {}
    },
    // 清空cid和类目
    clearCid(){
      this.cid = '';
      this.leimu = '';
    },
    // 获取类目名称
    getName(data){
      this.leimu = data.name;
      this.cid = data.cid;
    },
    // 修改innerVisible的值
    changeInner(v){
      this.innerVisible = v;
    },
    // 修改outerVisible的值
    changeOuter(v){
      this.outerVisible = v;
    },
    getdata(page){
      this.$api.getSelectProduct(page)
      .then(data=>{
        this.tableData = data.data.result
      })
    },
    // 分页器分页请求数据
    changePage(page){
      this.currentPage = page;
      this.getdata(page)
    },
    // 编辑
    bianji(row){
      console.log(row)
      this.$api.getPreUpdateItem({id:row.id})
      .then(data=>{
        console.log(data)
        if(data.status == 200){
          this.outerVisible = true;
          this.preData = data.data
        }
      })

      // 规格参数
      this.getGuiGe(row.cid);
      // 规格参数预更新数据
      this.$api.getPreUpdateItemParamContent({id:row.id})
      .then(data=>{
        console.log(data);
        this.preGuige = data.data;
      })
    },
    // 删除
    shanchu(row){
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.getDeleteItemById({id:row.id})
          .then(data=>{
            if(data.status==200){
              this.getdata(1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
            
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  watch:{
    guige(n){
      this.guige = n;
    },
    preGuige(n){
      this.preGuige = n;
    }
  }
};
</script>
<style scoped lang='less'>
.center{
  margin:10px 0;
  text-align: center;
}
</style>
